<template>
  <div>
    <input class="item" type="text" id="input" v-model="fst" placeholder="输入字体大小1~13" />
    <button plain type="primary" @tap="tapFS">改变全局字体</button>

    <div :class="'fs'+fs">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, corrupti hic ipsum, consequuntur reiciendis doloribus consequatur culpa error earum quo a. Commodi, est adipisci debitis possimus optio expedita beatae dolores!</div>
    <div :class="'fs'+fs">观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。
      舍利子，色不异空，空不异色，色即是空，空即是色，受想行识亦复如是。
      舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界乃至无意识界，无无明亦无无明尽，乃至无老死，亦无老死尽，无苦集灭道，无智亦无得。
      以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍；无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。
      三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。
      故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。
      故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState([
      // 将this.fs 映射为 store.state.fs
      'fs'
    ])
  },
  data () {
    return {
      fst: '',
    }
  },
  methods: {
    ...mapMutations([
      'fsChange'
    ]),
    // 修改全局字体
    tapFS () {
      console.log(this.fst)
      this.fsChange(+this.fst)
    },
  },
  onLoad() {
    
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 90%;
  margin: auto;
  padding: 10rpx;
  margin: 10rpx;
  color: #fff;
  background-color: skyblue;
  text-align: center;
  border-radius: 10rpx;
}
</style>
